<template>
  <div class="search">
    <div class="searcHead">
      <div class="back">
        <router-link to="/">
          <img src="../assets/xy.png" alt="" />
        </router-link>
      </div>
      <img class="ssimg" src="../assets/ss.png" alt="" />
      <input type="text" placeholder="人类镇守使" v-model="text" />
      <span @click="hisText" v-if="isSer">
        <a>搜索</a>
      </span>
    </div>

    <!-- 热门搜索 -->
    <div class="hotSearch">
      <div class="hotname">
        <div class="text">大家都在搜</div>
      </div>
    </div>

    <!-- 热门搜索内容 -->
    <div class="hotList">
      <div v-for="(item, index) in hotList" :key="index">
        <span @click="btnHotlist(item)">
          {{ item }}
        </span>
      </div>
    </div>

    <!-- 搜索历史 -->
    <div class="history">
      <div class="historyname">
        <div class="text">搜索历史</div>
      </div>
    </div>

    <!-- 搜索历史内容 -->
    <div class="hotList">
      <div v-for="(item, index) in historyList" :key="index">
        <span @click="btnHistory(item.names)">
          {{ item.names }}
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: "",
      hotList: [],
      historyList: [],
      isSer: true,
      isChu: false,
    };
  },
  created() {
    this.$axios.get("/hot-books").then((d) => {
      this.hotList = d.data.hotWords;
    });
    // 历史
    let hisdata = localStorage.getItem("hisData");
    this.historyList = JSON.parse(hisdata);
  },
  methods: {
    hisText() {
      if (this.text == "") {
        this.text = "人类镇守使";
        this.StorageFun(this.text);
        this.$router.push({
          path: "/searchResult/人类镇守使",
        });
      } else {
        this.StorageFun(this.text);
        this.$router.push({
          path: `/searchResult/${this.text}`,
        });
      }
    },
    // 点击热门搜索
    btnHotlist(name) {
      this.$router.push({
        path: `/searchResult/${name}`,
      });
      this.StorageFun(name);
    },
    // 点击历史搜索
    btnHistory(name) {
      this.$router.push({
        path: `/searchResult/${name}`,
      });
      this.StorageFun(name);
    },
    // 封账的方法
    StorageFun(name) {
      let con = {
        names: name,
      };
      let hisdata = localStorage.getItem("hisData");
      if (hisdata) {
        let arr = JSON.parse(hisdata);
        let isHave = arr.some(function (item) {
          return item.names == con.names;
        });

        this.isChu = isHave;

        if (this.isChu) {
          return false;
        } else {
          arr.push(con);
          localStorage.setItem("hisData", JSON.stringify(arr));
        }
      } else {
        let abc = [];
        abc.push(con);

        localStorage.setItem("hisData", JSON.stringify(abc));
      }
    },
  },
};
</script>

<style lang="less" scoped>
.searcHead {
  position: relative;
  .back {
    display: inline-block;
    vertical-align: middle;
    margin-left: 2vw;
    img {
      width: 6vw;
      height: 6vw;
    }
  }
  input {
    padding-left: 10vw;
    background: rgb(246, 247, 249);
    border: none;
    height: 8vw;
    margin: 2vw 4vw 2vw 4vw;
    width: 62vw;
    border-radius: 6px;
  }
  input::-webkit-input-placeholder {
    color: #ccc;
  }
  .ssimg {
    position: absolute;
    left: 14vw;
    top: 3vw;
    width: 6vw;
    height: 6vw;
  }
  span {
    a {
      color: rgb(51, 55, 61);
      display: inline-block;
      width: 10vw;
      text-align: center;
    }
  }
}
.hotname {
  background: rgb(247, 247, 247);
  height: 12vw;
  .text {
    color: rgb(150, 155, 163);
    font-size: 14px;
    margin-left: 4vw;
    padding-top: 6vw;
  }
}
.hotList {
  margin: 2vw 4vw;
  div {
    span {
      float: left;
      padding: 1vw;
      border-radius: 20px;
      margin: 2vw 2vw 2vw 0vw;
      border: 1px solid rgb(150, 155, 163);
      font-size: 14px;
      color: rgb(150, 155, 163);
      a {
        color: rgb(150, 155, 163);
      }
    }
  }
  &::after {
    content: "";
    display: block;
    clear: both;
  }
}
.historyname {
  background: rgb(247, 247, 247);
  height: 12vw;
  .text {
    color: rgb(150, 155, 163);
    font-size: 14px;
    margin-left: 4vw;
    padding-top: 6vw;
  }
}
</style>